<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px">
            <el-input type="text" placeholder="请输入操作人" v-model="params.modifyUser" style="width: 250px;margin-right: 10px"></el-input>
            <el-input type="text" placeholder="请输入错误描述文本" v-model="params.operation" style="width: 250px;margin-right: 10px"></el-input>
        </div>
        <div>
            <el-table :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" style="margin: 10px" :data="data" v-loading="loading" size="mini" border stripe :height="500">
                <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                <el-table-column label="操作相关" align="center">
                    <el-table-column prop="modifyUser" label="操作人" align="center"></el-table-column>
                    <el-table-column prop="ip" label="操作人IP地址" align="center"></el-table-column>
                </el-table-column>

                <el-table-column label="错误相关" align="center">
                    <el-table-column prop="operation" label="错误描述文本" align="center"></el-table-column>
                    <el-table-column prop="method" label="错误所在方法" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="params" label="请求参数" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="message" label="错误信息" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="errorType" label="错误类型" show-overflow-tooltip align="center"></el-table-column>
                </el-table-column>

                <el-table-column prop="createTime" label="操作时间" align="center">
                   <template slot-scope="scope">
                        {{$YEAR_MONTH_DAY_HOURS_MINUTES_SECONDS(scope.row.createTime)}}
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background
                           layout="total,prev,pager,next"
                           :total="params.total"
                           :page-size="params.size"
                           :current-page="params.page"
                           :hide-on-single-page="false"
                           @size-change="handleSizeChange"
                           @current-change="handlePageChange"></el-pagination>
        </div>
    </div>
</template>

<script>

    import { getErrorLogList } from "@/api/system/log";

    export default {
        name: "error-log-index",
        data(){
            return {
                loading:true,
                data:[],
                params:{page:1,size:30,total:0,modifyUser:'',operation:''}
            }
        },
        watch:{
            'params.modifyUser'(data){
                if(data){
                    this.getErrorLogList(this.params);
                }
            },
            'params.operation'(data){
                if(data){
                    this.getErrorLogList(this.params);
                }
            }
        },
        methods:{
            handleSizeChange(val){
                this.params.size = val;
                this.getErrorLogList(this.params);
            },
            handlePageChange(val){
                this.params.page = val;
                this.getErrorLogList(this.params);
            },
            getErrorLogList(data){
                getErrorLogList(data).then(res=>{
                    if(res.data.success){
                        this.data = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            }
        },
        created() {
            this.getErrorLogList(this.params);
        }
    }
</script>

<style scoped>

</style>